<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {message} from "ant-design-vue";
import {deleteCollectAPI, pageCollectAPI} from "@/apis/collect.ts";
import {useInfoStore} from "@/store/user/user.ts";
import {useRouter} from "vue-router";
import dayjs from "dayjs";


//分页查询岗位和企业信息
const count = 6;
const pageCurrent = ref(1);
const pageTotal = ref(0);
const initLoading = ref(true);
const loading = ref(false);
// const data = <any>reactive([]);
const list = <any>reactive([]);
const pageDate = <any>ref({
  searchName: '',
  collectJobseekerId: '',
  collectType: 'job',
  pageCurrent: pageCurrent.value,
  pageSize: count,
});
const userStore = useInfoStore().userInfo;
const getList = async (pageDate: any) => {
  pageDate.collectJobseekerId = userStore.userId;
  const res = await pageCollectAPI(pageDate);
  if (res.data.flag) {
    pageTotal.value = res.data.data.total;
    res.data.data.data.forEach((item: any) => {
      item.jobStartDate = dayjs(item.jobStartDate).format('YYYY-MM-DD')
      item.jobEndDate = dayjs(item.jobEndDate).format('YYYY-MM-DD')
    });

    // data.push(...res.data.data.data)
    list.push(...res.data.data.data)
    initLoading.value = false;
  } else {
    message.error(res.data.message)
  }
}

//生命周期
onMounted(() => {
  getList(pageDate.value);
});

const onLoadMore = () => {
  loading.value = true;
  initLoading.value = true;
  pageCurrent.value += 1;
  getList(pageDate.value).then(() => {
    loading.value = false;
  });
};

//筛选
const check = () => {
  list.splice(0, list.length);
  getList(pageDate.value);
}


//取消收藏
const cancelCollect = (JobEmployerId: string, collectType: string) => {
  deleteCollectAPI({
    collectJobseekerId: userStore.userId,
    collectType: collectType,
    collectJobEmployerId: JobEmployerId
  }).then((res) => {
    if (res.data.flag) {
      message.success(res.data.message)
      list.splice(0, list.length);
      getList(pageDate.value);
    } else {
      message.error(res.data.message)
    }
  })
}

//查看岗位
const router = useRouter();
const goToJobAndEmployerDetail = (jobId: string) => {
  router.push({
    name: 'jobAndEmployerDetail',
    params: {
      jobId: jobId // 确保传递的参数为字符串类型
    }
  });
};
//查看公司
const goToEmployerDetail = (employerId: string) => {
  router.push({
    name: 'employerDetail',
    params: {
      employerId: employerId // 确保传递的参数为字符串类型
    }
  });
};

//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '正常招聘':
      return 'green';
    case '停止招聘':
      return 'red';
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}


</script>
<template>
  <div class="collect">
    <div>
      <div class="title">
        <h4>
          我 的 收 藏
        </h4>

      </div>
      <div class="filter">
        <a-radio-group v-model:value="pageDate.collectType" button-style="solid" @change="check">
          <a-radio-button style="width: 200px;text-align: center" value="employer">收 藏-公 司</a-radio-button>
          <a-radio-button style="width: 200px;text-align: center" value="job">收 藏-岗 位</a-radio-button>
        </a-radio-group>
      </div>

    </div>

    <div class="main-content">
      <a-list
          :data-source="list"
          :loading="initLoading"
          class="demo-loadmore-list"
          item-layout="horizontal"
      >
        <template #loadMore>
          <div
              v-if="!initLoading && !loading && list.length < pageTotal"
              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
          >
            <a-button @click="onLoadMore">获取更多</a-button>
          </div>
        </template>
        <template #renderItem="{ item }">

          <a-list-item>
            <template #actions>
              <a-button v-if="pageDate.collectType=='job'" ghost type="primary"
                        @click="goToJobAndEmployerDetail(item.jobId)">查看
              </a-button>
              <a-button v-else ghost type="primary" @click="goToEmployerDetail(item.employerId)">查看</a-button>
              <a-button v-if="pageDate.collectType=='job'" danger ghost type="primary"
                        @click="cancelCollect(item.jobId,'job')">取消收藏
              </a-button>
              <a-button v-else danger ghost type="primary" @click="cancelCollect(item.employerId,'employer')">取消收藏
              </a-button>
            </template>
            <a-skeleton :loading="!!item.loading" :title="false" active avatar>
              <div v-if="pageDate.collectType=='job'" class="item_class">
                <a-list-item-meta
                    :description="item.jobSalary+'元/'+item.jobSalaryType+'&nbsp&nbsp&nbsp&nbsp&nbsp 时间:'+item.jobStartDate+' 到 '+item.jobEndDate"
                >
                  <template #title>
                    {{ item.jobTitle }}
                  </template>
                </a-list-item-meta>
                <a-badge-ribbon :color="Color(item.jobStatus)" :text="item.jobStatus">
                  <div style="border-radius: 10px;width: auto;min-width:180px; background-color: #EAF2FF;padding: 10px">
                    <div>
                      类型: {{ item.jobType }}
                    </div>
                    <div>
                      地点: {{ item.jobLocation }}
                    </div>
                  </div>
                </a-badge-ribbon>
              </div>
              <div v-else class="item_class">
                <a-list-item-meta
                    :description="item.employerCompanyDescription"
                >
                  <template #title>
                    {{ item.employerCompanyName }}
                  </template>
                </a-list-item-meta>
                <a-badge-ribbon :color="Color(item.employerIsVerified)" :text="item.employerIsVerified">
                  <div style="border-radius: 10px;width: auto;min-width:180px;background-color: #EAF2FF;padding: 10px">
                    <div>
                      行业: {{ item.employerCompanyIndustry }}
                    </div>
                    <div>
                      地点: {{ item.employerCompanyAddress }}
                    </div>
                  </div>
                </a-badge-ribbon>
              </div>

            </a-skeleton>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>

</template>

<style scoped>
.collect {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .filter {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .main-content {
    width: 100%;
    flex-grow: 1;
    height: 90%;
    overflow: auto; /* 内容超出时自动显示滚动条 */

    .item_class {
      display: flex;
      width: 100%;

    }
  }

}

</style>
